<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <meta name="theme-color" content="#2F3BA2" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="referrer" content="no-referrer" />
    <meta name="description" content="A sample pwa app" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="Hello PWA" />
    <link rel="shortcut icon" href="https://youpin.mi.com/favicon.ico" />
    <link
			rel="stylesheet"
			href="https://m.youpin.mi.com/app/shop/pages/2018/m/swiper/swiper-3.4.2.min.css"
    />
    <meta http-equiv="cache-control" content="no-cache" />
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="https://tp.hd.mi.com/gettimestamp"></script>
    <script
			type="text/javascript"
			src="//fe.res.youpin.mi-img.com/lib10/youpin-lib10.min.js?update=66"
		></script>

    <link rel="apple-touch-icon" href="logo192.png" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Hello PWA</title>
    <script>
			(window.zeptoCbs = []),
				(window.registerAfterZepto = function(e) {
					zeptoCbs.push(e);
				});
    </script>
    <script>
			function parseQueryString(url) {
				var arr;
				var res = {};
				url = url.split('#')[0];
				arr = url.split('?');
				arr.shift();
				var queryStr = arr.join('?');
				if (queryStr.trim().length === 0) {
					return res;
				}
				arr = queryStr.split('&');
				for (var i = 0; i < arr.length; i++) {
					var itemArr = arr[i].split('=');
					var name = itemArr.shift();
					var value = itemArr.join('=');
					res[name] = value;
				}
				return res;
			}
			var userAgent = navigator.userAgent.toLowerCase();
			window.goalipay = function(htmlText) {
				//支付宝wap支付
				document.getElementById('alipay').innerHTML = htmlText;
				document.forms['alipaysubmit'].submit();
			};
			window.goMiFinancePay = function(htmlText) {
				//小米分期wap支付
				document.getElementById('alipay').innerHTML = htmlText;
				document.forms['micashsubmit'].submit();
			};
		</script>
		<script>
			window.WebpSupport = false;
			var webP = new Image();
			webP.src =
				'';
			webP.onload = webP.onerror = function() {
				window.WebpSupport = webP.height === 2;
			};
		</script>
		<script>
			(function(global) {
				var startY = 0;
				var enabled = false;
				var handleTouchmove = function(evt) {
					var el = evt.target;
					while (el !== document.body) {
						var style = window.getComputedStyle(el);
						if (!style) {
							break;
						}
						if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
							return;
						}
						var scrolling = style.getPropertyValue('-webkit-overflow-scrolling');
						var overflowY = style.getPropertyValue('overflow-y');
						var height = parseInt(style.getPropertyValue('height'), 10);
						var isScrollable =
							scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll');
						var canScroll = el.scrollHeight > el.offsetHeight;
						if (isScrollable && canScroll) {
							var curY = evt.touches ? evt.touches[0].screenY : evt.screenY;
							var isAtTop = startY <= curY && el.scrollTop === 0;
							var isAtBottom = startY >= curY && el.scrollHeight - el.scrollTop === height;
							if (isAtTop || isAtBottom) {
								evt.preventDefault();
							}
							return;
						}
						el = el.parentNode;
					}
					evt.preventDefault();
				};
				var handleTouchstart = function(evt) {
					startY = evt.touches ? evt.touches[0].screenY : evt.screenY;
				};
				var enable = function() {
					window.addEventListener('touchstart', handleTouchstart, false);
					window.addEventListener('touchmove', handleTouchmove, false);
					enabled = true;
				};
				var disable = function() {
					window.removeEventListener('touchstart', handleTouchstart, false);
					window.removeEventListener('touchmove', handleTouchmove, false);
					enabled = false;
				};
				var isEnabled = function() {
					return enabled;
				};
				var testDiv = document.createElement('div');
				document.documentElement.appendChild(testDiv);
				testDiv.style.WebkitOverflowScrolling = 'touch';
				var scrollSupport =
					'getComputedStyle' in window &&
					window.getComputedStyle(testDiv)['-webkit-overflow-scrolling'] === 'touch';
				document.documentElement.removeChild(testDiv);
				if (scrollSupport) {
					enable();
				}
				var iNoBounce = { enable: enable, disable: disable, isEnabled: isEnabled };
				if (typeof module !== 'undefined' && module.exports) {
					module.exports = iNoBounce;
				}
				if (typeof global.define === 'function') {
					(function(define) {
						define('iNoBounce', [], function() {
							return iNoBounce;
						});
					})(global.define);
				} else {
					global.iNoBounce = iNoBounce;
				}
			})(this);
		</script>
		<script>
			var BASE_URL = window.location.href;
			var BASE_URL_COME = BASE_URL.indexOf('.com');
			var BASE_URL_DOMAIN = BASE_URL.substr(0, BASE_URL_COME + 4);
			var BASE_URL_COOKIE_ARR = BASE_URL_DOMAIN.split('.');
			var BASE_URL_COOKIE = BASE_URL_COOKIE_ARR[BASE_URL_COOKIE_ARR.length - 2];
			var genuuid = (function() {
				var T = function() {
					var d = 1 * new Date(),
						i = 0;
					while (d === 1 * new Date()) {
						i++;
					}
					return d.toString(16) + i.toString(16);
				};
				var R = function() {
					return Math.random()
						.toString(16)
						.replace('.', '');
				};
				var UA = function(n) {
					var ua = navigator.userAgent,
						i,
						ch,
						buffer = [],
						ret = 0;

					function xor(result, byte_array) {
						var j,
							tmp = 0;
						for (j = 0; j < byte_array.length; j++) {
							tmp |= buffer[j] << (j * 8);
						}
						return result ^ tmp;
					}
					for (i = 0; i < ua.length; i++) {
						ch = ua.charCodeAt(i);
						buffer.unshift(ch & 0xff);
						if (buffer.length >= 4) {
							ret = xor(ret, buffer);
							buffer = [];
						}
					}

					if (buffer.length > 0) {
						ret = xor(ret, buffer);
					}

					return ret.toString(16);
				};
				return function() {
					// 鏈変簺娴忚鍣ㄥ彇涓睆骞曞搴﹂兘寮傚父...
					var se = String(window.screen.height * window.screen.width);
					if (se && /\d{5,}/.test(se)) {
						se = se.toString(16);
					} else {
						se = String(Math.random() * 31242)
							.replace('.', '')
							.slice(0, 8);
					}
					var val = T() + '-' + R() + '-' + UA();
					if (val) {
						return val;
					} else {
						return (String(Math.random()) + String(Math.random()) + String(Math.random())).slice(
							2,
							15,
						);
					}
				};
			})();
			var YouPin_stat = {
				getCookieVal: function(offset, encode) {
					var endstr = document.cookie.indexOf(';', offset);
					if (endstr === -1) {
						endstr = document.cookie.length;
					}
					if (!encode) {
						return document.cookie.substring(offset, endstr);
					}
					return decodeURIComponent(document.cookie.substring(offset, endstr));
				},
				getCookie: function(name, domain, callback, encode) {
					var arg = name + '=';
					var i = 0;
					var j = 0;
					while (i < document.cookie.length) {
						j = i + arg.length;
						if (document.cookie.substring(i, j) === arg) {
							var val = YouPin_stat.getCookieVal(j, encode);
							if (callback) {
								callback(val);
							}

							return val;
						}
						i = document.cookie.indexOf(' ', i) + 1;

						if (!i) {
							if (callback) {
								callback(null);
							}

							return null;
						}
					}
				},
				setCookie: function(name, value, domain, expires) {
					var argv = arguments;
					var argc = arguments.length;
					var now = new Date();
					expires = expires || new Date(2117, now.getMonth() + 1, now.getUTCDate());
					var path = '/';
					//TODO
					domain = argc > 2 ? argv[2] : '.' + BASE_URL_COOKIE + '.com';
					var secure = false;
					try {
						document.cookie =
							name +
							'=' +
							encodeURIComponent(value) +
							(!expires ? '' : '; expires=' + expires.toGMTString()) +
							(path == null ? '' : '; path=' + path) +
							(!domain ? '' : '; domain=' + domain) +
							(secure === true ? '; secure' : '');
					} catch (error) {
						console.log('template setCookie error:', error);
					}
				},
				UUID: genuuid,
				getQueryParam: function(url, param) {
					param = param.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
					var regexS = '[\\?&]' + param + '=([^&#]*)',
						regex = new RegExp(regexS),
						results = regex.exec(url);
					if (
						results === null ||
						(results && typeof results[1] !== 'string' && results[1].length)
					) {
						return '';
					} else {
						return decodeURIComponent(results[1]).replace(/\+/g, ' ');
					}
				},
				os: (function() {
					var ua = navigator.userAgent,
						isWindowsPhone = /(?:Windows Phone)/.test(ua),
						isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
						isAndroid = /(?:Android)/.test(ua),
						isFireFox = /(?:Firefox)/.test(ua),
						isTablet =
							/(?:iPad|PlayBook)/.test(ua) ||
							(isAndroid && !/(?:Mobile)/.test(ua)) ||
							(isFireFox && /(?:Tablet)/.test(ua)),
						isPhone = /(?:iPhone)/.test(ua) && !isTablet,
						isPc = !isPhone && !isAndroid && !isSymbian;
					return {
						isTablet: isTablet,
						isPhone: isPhone,
						isAndroid: isAndroid,
						isPc: isPc,
					};
				})(),
				setdistinct_id: function() {
					var idkey = 'youpindistinct_id';
					if (!YouPin_stat.getCookie(idkey)) {
						YouPin_stat.setCookie(idkey, YouPin_stat.UUID());
					}
				},
				setSource: function() {
					var source = YouPin_stat.getQueryParam(window.location.href, 'source');
					if (source) {
						var expires = new Date(Date.now() + 1800000);
						YouPin_stat.setCookie('mijiasn', source, '.' + BASE_URL_COOKIE + '.com', expires);
					}
				},
				setSessionId: function() {
					var date = new Date();
					var session_id = date.getTime() + '_' + YouPin_stat.UUID();
					if (!YouPin_stat.getCookie('youpin_sessionid')) {
						YouPin_stat.setCookie(
							'youpin_sessionid',
							session_id,
							'.' + BASE_URL_COOKIE + '.com',
							'session',
						);
					}
				},
				setmjclient: function() {
					YouPin_stat.setCookie('mjclient', YouPin_stat.os.isPc ? 'pc' : 'm');
				},
				setServiceToken: function() {
				},
				init: function() {
					YouPin_stat.setdistinct_id();
					YouPin_stat.setSource();
					//   YouPin_stat.setmjclient();
					YouPin_stat.setSessionId();
					YouPin_stat.setServiceToken();
				},
			};
			YouPin_stat.init();
		</script>
		<style type="text/css">
			.swiper-container {
				overflow: visible !important;
				margin-top: 10px;
			}
			.swiper-container .swiper-wrapper .swiper-slide {
				border-radius: 6px;
				width: '100%';
				height: '100%';
			}
			.swiper-container .swiper-wrapper .swiper-slide img {
				width: 100%;
				border-radius: 6px;
				height: '100%';
			}

			#iframebox {
				-webkit-overflow-scrolling: touch;
				overflow-y: scroll;
			}
			body,
			html {
				height: 100%;
				width: 100%;
				overflow: hidden;
				-webkit-overflow-scrolling: touch;
			}
			#mijia {
				height: 100%;
				width: 100%;
				position: relative;
				overflow: auto;
				margin: 0 auto;
				max-width: 600px;
				-webkit-overflow-scrolling: touch;
			}
			.tab-01-0,
			.tab-01-1,
			.tab-02-0,
			.tab-02-1,
			.tab-03-0,
			.tab-03-1,
			.tab-04-0,
			.tab-04-1,
			.tab-05-0,
			.tab-05-1 {
				max-width: 100%;
				background-size: 100%;
				height: 24px;
				width: 24px;
				background-image: url('https://img.youpin.mi-img.com/static/public/tab/tab_images.png');
			}

			.tab-01-0 {
				background-position: 0 0%;
				background-size: 100%;
			}
			.tab-01-1 {
				background-position: 0 11.111111%;
				background-size: 100%;
			}
			.tab-02-0 {
				background-position: 0 22.222222%;
				background-size: 100%;
			}
			.tab-02-1 {
				background-position: 0 33.333333%;
				background-size: 100%;
			}
			.tab-03-0 {
				background-position: 0 44.444444%;
				background-size: 100%;
			}
			.tab-03-1 {
				background-position: 0 55.555556%;
				background-size: 100%;
			}
			.tab-04-0 {
				background-position: 0 66.666667%;
				background-size: 100%;
			}
			.tab-04-1 {
				background-position: 0 77.777778%;
				background-size: 100%;
			}
			.tab-05-0 {
				background-position: 0 88.888889%;
				background-size: 100%;
			}
			.tab-05-1 {
				background-position: 0 100%;
				background-size: 100%;
			}
			::-webkit-scrollbar {
				display: none;
			}
			#mijia div {
				flex-basis: auto;
			}
		</style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
		-->
		<script src="https://m.youpin.mi.com/app/shop/pages/2018/m/swiper/swiper-3.4.2.min.js"></script>
  </body>
  <script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement('script');
			hm.src = 'https://hm.baidu.com/hm.js?3d0145da4163eae34eb5e5c70dc07d97';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>
</html>
